<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可转移对象</title>
    <script src="./main.js"></script>
</head>

<body>
    <div class="main">
        <h2>
            可转移对象
        </h2>
        <p>
            使用可转移对象（transferable objects）可以把所有权从一个上下文转移到另一个上下文。在不太可
            能在上下文间复制大量数据的情况下，这个功能特别有用。只有如下几种对象是可转移对象：
        </p>
        <ul>
            <li>
                 ArrayBuffer
            </li>
            <li>
                 MessagePort
            </li>
            <li>
                 ImageBitmap
            </li>
            <li>
                 OffscreenCanvas
            </li>
        </ul>
        <p>postMessage()方法的第二个可选参数是数组，它指定应该将哪些对象转移到目标上下文。在遍
            历消息负载对象时，浏览器根据转移对象数组检查对象引用，并对转移对象进行转移而不复制它们。这
            意味着被转移的对象可以通过消息负载发送，消息负载本身会被复制，比如对象或数组。
            下面的例子演示了工作者线程对 ArrayBuffer 的常规结构化克隆。这里没有对象转移：
        </p>
        <p>
            在这个示例中，我们创建了一个 ArrayBuffer 对象并通过 postMessage 将它发送给 worker.js。由于在 postMessage 调用中使用了第二个参数（传递的
            arrayBuffer），JavaScript 会“转移”该缓冲区，而不是“复制”它。
        </p>
        <p>
            当传递 ArrayBuffer 作为消息的一部分时，postMessage 的第二个参数指定了缓冲区的“传递列表”。这种方式称为 Transferable Objects，表示缓冲区在传递给 Worker
            后将不再属于主线程。转移完成后，该缓冲区在原始线程中会被 清空（中和），byteLength 变为 0，因为它的所有权已被转移到 Worker 中。
        </p>
    </div>
</body>

</html>